<template>
    <div class="login">
        <van-nav-bar title="业绩概览" left-arrow @click-left="backUp"></van-nav-bar>
        <section class="member-head">
            <div style="width: 100%">
                <div class="member-avatar">
                    <img v-lazy="achievement.avatar" alt/>
                </div>
            </div>
            <div style="width: 100%; transform: translate(0,50px)">
                <p style="color: white">{{achievement.nickname}}</p>
            </div>
        </section>
        <div class="member-base-info">
            <div style="width: 100%; text-align: center">
                <div style="font-size: 14px; color: white;">等级</div>
                <div style="font-size: 12px; color: white">{{achievement.levelDesc}}</div>
            </div>
            <div style="width: 100%; text-align: center">
                <div style="font-size: 14px; color: white">手机号码</div>
                <div style="font-size: 12px; color: white">{{achievement.mobile}}</div>
            </div>
            <div style="width: 100%; text-align: center">
                <div style="font-size: 14px; color: white">升级条件</div>
                <div style="font-size: 12px; color: white">{{achievement.upgradeCondition}}</div>
            </div>
        </div>

        <van-cell-group>
            <div style="width: 50%; height: 50%; float: left">
                <div style="display: flex;align-items: flex-end;justify-content: center;width: 100%;height: 40%">
                    <img src="../../assets/vip/wallet_1.png" style="height: 40px;width: 40px">
                </div>
                <div style="display: flex;align-items: center;justify-content: center;width: 100%;height: 20%">
                    <a style="color: white; font-size: 16px">余额</a>
                </div>
                <div style="display: flex;align-items: flex-start;justify-content: center;width: 100%;height: 20%">
                    <a style="color: white; font-size: 14px">{{achievement.balance}}</a>
                </div>
            </div>
            <div style="width: 50%; height: 50%; float: left">
                <div style="display: flex;align-items: flex-end;justify-content: center;width: 100%;height: 40%">
                    <img src="../../assets/vip/achievement_manage.png" style="height: 40px;width: 40px">
                </div>
                <div style="display: flex;align-items: center;justify-content: center;width: 100%;height: 20%">
                    <a style="color: white; font-size: 16px">总业绩</a>
                </div>
                <div style="display: flex;align-items: flex-start;justify-content: center;width: 100%;height: 20%">
                    <a style="color: white; font-size: 14px">{{achievement.totalAchievement}}</a>
                </div>
            </div>
            <div style="width: 50%; height: 50%; float: left">
                <div style="display: flex;align-items: flex-end;justify-content: center;width: 100%;height: 40%">
                    <img src="../../assets/vip/achievement.png" style="height: 40px;width: 40px">
                </div>
                <div style="display: flex;align-items: center;justify-content: center;width: 100%;height: 20%">
                    <a style="color: white; font-size: 16px">本周业绩</a>
                </div>
                <div style="display: flex;align-items: flex-start;justify-content: center;width: 100%;height: 20%">
                    <a style="color: white; font-size: 14px">{{achievement.weekAchievement}}</a>
                </div>
            </div>
            <div style="width: 50%; height: 50%; float: left">
                <div style="display: flex;align-items: flex-end;justify-content: center;width: 100%;height: 40%">
                    <img src="../../assets/vip/order.png" style="height: 40px;width: 40px">
                </div>
                <div style="display: flex;align-items: center;justify-content: center;width: 100%;height: 20%">
                    <a style="color: white; font-size: 16px">订单数量</a>
                </div>
                <div style="display: flex;align-items: flex-start;justify-content: center;width: 100%;height: 20%">
                    <a style="color: white; font-size: 14px">{{achievement.totalOrderCount}}件</a>
                </div>
            </div>
        </van-cell-group>
    </div>
</template>
<script>
    import url_java from "../../utils/api_data";
    import {Field, Icon, Button, Cell, CellGroup, NavBar, Toast} from "vant";
    import axios from "axios";
    export default {
        name: "login",
        components: {
            [Field.name]: Field,
            [Icon.name]: Icon,
            [Button.name]: Button,
            [Cell.name]: Cell,
            [CellGroup.name]: CellGroup,
            [NavBar.name]: NavBar,
            [Toast.name]: Toast
        },
        data() {
            return {
                achievement: {},
                memberId: this.$route.params.memberId
            };
        },
        mounted() {
            console.log(this.memberId);
            this.getTeamAchievement();
        },
        methods: {
            backUp() {
                this.$router.go(-1);
            },
            getTeamAchievement() {
                this.$axios({
                    method: "get",
                    url: url_java.teamAchievement,
                    params: {
                        token: localStorage.getItem("token"),
                        memberId: this.memberId
                    }
                }).then(res => {
                    console.log(res);
                    this.achievement = res;
                });
            }
        }
    };
</script>
<style lang="less" scoped>
    @import "~style/common.less";

    /deep/ .van-cell-group {
        background-image: url("../../assets/vip/color.jpg");
        background-size: 100% 100%;
        width: 84vw;
        margin: 0 auto;
        height: 50vh;
        /*display: flex;*/
        box-shadow: 0px 6px 30px 0px rgba(49, 49, 49, 0.12);
        border-radius: 0.4rem;
        border: none;
    }

    .login {
        background-color: black;
        height: 100vh;
        z-index: 999999;

        .van-cell-group {
            padding: 20px;
        }
    }

    .member-head {
        height: 28vh;
        /*justify-content: center;*/
        text-align: center;
        align-items: center;
        background-image: url("../../assets/imgList/team_head_bg.jpeg");
    }

    .member-base-info {
        height: 10vh;
        display: flex;
        width: 100%;
        justify-content: center;
        text-align: center;
        align-items: center;
    }

    .member-avatar {
        width: 68px;
        height: 68px;
        margin: 0 auto;
        /*margin: 0 auto;*/
        font-size: 0;
        /*line-height: 0;*/
        transform: translate(0px, 40px);
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.66);
        position: relative;
        overflow: hidden;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .login-btn {
        margin: 10% auto;
        width: 80vw;
        height: 1.2rem;
        line-height: 1.2rem;
        background: @priColor;
        box-shadow: 0px 6px 10px 0px rgba(251, 168, 111, 0.1);
        border-radius: 2rem;
    }

    .tip {
        display: flex;
        justify-content: space-between;
        .font-dpr(14px);
        margin-top: 20px;

        .reg {
            color: @priColor;
        }

        a {
            color: @fontColorH3;
        }
    }

    [class*="van-hairline"]::after {
        border: none;
    }

    .van-cell-group {
        h3 {
            .font-dpr(15px);
            color: @fontColorH3;
            line-height: 4rem;
            text-align: center;
        }
    }
</style>